import React, { Component, useContext, useState, useEffect, useRef } from 'react';
import { Container } from './style'
import {
  Tabs, Modal, Button, Radio, Input, DatePicker, Space, Menu, Dropdown,
  Table, Tooltip, Pagination, Select, Popconfirm, Form
} from 'antd';
import 'antd/dist/antd.css'
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { DownOutlined } from '@ant-design/icons';
import Department from './department'
import Alert from '../../components/alet/index'
import Alert1 from '../../components/alet/index1'
import Alert2 from '../../components/alet/index2'
const { Option } = Select;
const { TabPane } = Tabs;
function callback(key) {
  console.log(key);
}
const { TextArea } = Input;
const { RangePicker } = DatePicker;
// import connect from './connect'
// @connect
// 表格

const EditableContext = React.createContext();

interface Item {
  key: string;
  id: string;
  name: string;
  age: string;
  address: string;
  branch: string;
  quantity: string;
  applicant: string;
  condition: string;

}

interface EditableRowProps {
  index: number;
}

const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

interface EditableCellProps {
  title: React.ReactNode;
  editable: boolean;
  children: React.ReactNode;
  dataIndex: string;
  record: Item;
  handleSave: (record: Item) => void;
}

const EditableCell: React.FC<EditableCellProps> = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef();
  const form = useContext(EditableContext);

  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
  };

  const save = async e => {
    try {
      const values = await form.validateFields();

      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{ margin: 0 }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
        <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
          {children}
        </div>
      );
  }
  return <td {...restProps}>{childNode}</td>;
};


//弹出框内容
function callbak(key) {
  console.log(key);
}



const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="陈岐" key="1" style={{ height:350 }}>
      <Alert />
    </TabPane>
    <TabPane tab="安秀奇" key="2" style={{ height:350 }}>
      <Alert1 />
    </TabPane>
    <TabPane tab="陈锐" key="3" style={{ height:350 }}>
      <Alert2 />
    </TabPane>
  </Tabs>
);

//审核弹出框
const App1 = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button className="batch" type="primary" onClick={showModal} type="none">
          审核
      </Button>
      <Modal title="申领单审核" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelText={"取消"} okText={"确定"}  width={1000}>
      <Alert />
      </Modal>
    </>
  );
};
//查看弹出框
const App2 = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button className="batch" type="primary" onClick={showModal} type="none">
          查看
      </Button>
      <Modal title="申领单查看" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelText={"取消"} okText={"确定"}  width={1000}>
      <Alert1 />
      </Modal>
    </>
  );
};

class index extends Component {

  //   表格
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: '序号',
        dataIndex: 'id',
      },
      {
        title: '申领单号',
        dataIndex: 'name',
        width: '20%',
        editable: true,
      },
      {
        title: '申领部门',
        dataIndex: 'branch',
      },
      {
        title: '申领日期',
        dataIndex: 'age',
      },

      {
        title: '申领类型',
        dataIndex: 'address',
      },
      {
        title: '申领数量',
        dataIndex: 'quantity',
      },
      {
        title: '申领人',
        dataIndex: 'applicant',
      },
      {
        title: '申领状态',
        dataIndex: 'condition',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text, record) =>(
          <Space>
          {/* 审核 */}
          <a><App1 /></a>
          {/* 查看 */}
          <a><App2 /></a>
        </Space>
        )
          // this.state.dataSource.length >= 1 ? (
          //   <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
          //     <a>审核</a> 
          //     <i>  </i>
          //     <a>查看</a>
          //   </Popconfirm>
          // ) : null,
      },
    ];

    this.state = {
      dataSource: [
        {
          key: '0',
          id: 1,
          name: 'SL20190923002',
          branch: '教务处',
          age: '2019-09-23',
          address: '个人申领',
          quantity: '3',
          applicant: '陈岐',
          condition: '总务未审核',
        },
        {
          key: '1',
          id: 2,
          name: 'SL20190923001',
          branch: '教务处',
          age: '2019-09-23',
          address: '个人申领',
          quantity: '1',
          applicant: '安秀奇',
          condition: '总务未审核',
        },
        {
          key: '2',
          id: 3,
          name: 'SL20190921001',
          branch: '教务处',
          age: '2019-09-21',
          address: '活动申领',
          quantity: '30',
          applicant: '陈锐',
          condition: '总务审核不通过',
        },
      ],
      count: 2,
    };
  }

  handleDelete = key => {
    const dataSource = [...this.state.dataSource];
    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
  };

  // handleAdd = () => {
  //   const { count, dataSource } = this.state;
  //   const newData = {
  //     key: count,
  //     name: `Edward King ${count}`,
  //     age: 32,
  //     address: `London, Park Lane no. ${count}`,
  //   };
  //   this.setState({
  //     dataSource: [...dataSource, newData],
  //     count: count + 1,
  //   });
  // };

  handleSave = row => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex(item => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    this.setState({ dataSource: newData });
  };
  //表格结束

  componentDidMount() {
    // 在这里发送每个页面获取数据的请求
    // this.props.setSwiperData()
  }
  state = {
    loading: false,
    visible: false,
    value: 1,
  };
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  };
  handleCancel = () => {
    this.setState({ visible: false });
  };
  render() {
    const { visible, loading } = this.state;

    const radioStyle = {
      /*   display: 'block', */
      height: '30px',
      lineHeight: '30px',
      marginLeft: '12px',
    };
    const { value } = this.state;



    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });


    return (
      <Container>
        <>
          {/* 总务审批 */}
          <div className="area">
            <Tabs defaultActiveKey="1" onChange={callback} size="small">
              <TabPane tab="部门审批" key="1" size="16px">
              <Department/>
              </TabPane>
              <TabPane tab="总务审批" key="2">
                <div className="banxin">
                  {/* 批量审核 */}
                  <div className="btn">
                  {/* <img src="../../assets/img/1.png" alt="" /> */}
                    <Button type="primary" onClick={this.showModal}>
                    <img src="../assets/img/logo.jpg" alt="" />
                      批量审核 - 8
                      </Button>
                    {/* 弹窗 */}
                    <Modal
                      visible={visible}
                      width="920px"
                      className="ant-modal-content"
                      title="批量审核"
                      color="#1c90f3"
                      onOk={this.handleOk}
                      onCancel={this.handleCancel}
                      footer={[
                        <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
                          确定
                          </Button>,
                        <Button key="back" onClick={this.handleCancel}>
                          取消
                          </Button>,
                      ]}
                    >
                      {/* 陈岐 */}
                      <Tabs onChange={callback} type="card" size="small"  >
                        <TabPane tab="陈岐" key="1">
                          <p>
                            申领单号：SL20190523001       申领日期：2019-05-23       申领人：陈岐       申领部门：教务处       部门审核人：姚珂       领用类型：个人领用
                            </p>
                          {/* 表格 */}
                          <table className="ta" width="860px" height="160px" border="1px solid #000">
                            <tr>
                              <td>序号</td>
                              <td>物品名称</td>
                              <td>物品编码</td>
                              <td>物品分类</td>
                              <td>品牌</td>
                              <td>规格/型号</td>
                              <td>单位</td>
                              <td>数量</td>
                            </tr>
                            <tr>
                              <td>1</td>
                              <td>5号电池</td>
                              <td>xm5hdc</td>
                              <td>办公用品</td>
                              <td>南孚</td>
                              <td></td>
                              <td>节</td>
                              <td>2</td>
                            </tr>
                            <tr>
                              <td>2</td>
                              <td>黑色签字笔</td>
                              <td>5hhqzb</td>
                              <td>办公用品</td>
                              <td>晨光</td>
                              <td>Pe63</td>
                              <td>个</td>
                              <td>1</td>
                            </tr>
                            <tr>
                              <td>合计</td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td>3</td>
                            </tr>
                          </table>
                          <p>
                            申领原因：个人办公用
                            </p>
                          <p>部门审核意见：月考用物品，望总务支持，谢谢</p>
                          <p>
                            总务审核状态:
                            <Radio.Group onChange={this.onChange} value={value}>
                              <Radio style={radioStyle} value={1}>
                                通过
                              </Radio>
                              <Radio style={radioStyle} value={2}>
                                不通过
                            </Radio>
                            </Radio.Group>
                          </p>
                          <p>
                            部门审核意见：
                            <TextArea rows={4}
                              size="small" />
                          </p>
                        </TabPane>
                        {/* 安秀奇 */}
                        <TabPane tab="安秀奇" key="2">
                        <p>
                            申领单号：SL20190523001       申领日期：2019-05-23       申领人：安秀奇       申领部门：教务处       部门审核人：姚珂       领用类型：个人领用
                            </p>
                          {/* 表格 */}
                          <table className="ta" width="860px" height="160px" border="1px solid #000">
                            <tr>
                              <td>序号</td>
                              <td>物品名称</td>
                              <td>物品编码</td>
                              <td>物品分类</td>
                              <td>品牌</td>
                              <td>规格/型号</td>
                              <td>单位</td>
                              <td>数量</td>
                            </tr>
                            <tr>
                              <td>1</td>
                              <td>5号电池</td>
                              <td>xm5hdc</td>
                              <td>办公用品</td>
                              <td>南孚</td>
                              <td></td>
                              <td>节</td>
                              <td>2</td>
                            </tr>
                            <tr>
                              <td>2</td>
                              <td>黑色签字笔</td>
                              <td>5hhqzb</td>
                              <td>办公用品</td>
                              <td>晨光</td>
                              <td>Pe63</td>
                              <td>个</td>
                              <td>1</td>
                            </tr>
                            <tr>
                              <td>合计</td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td>3</td>
                            </tr>
                          </table>
                          <p>
                            申领原因：个人办公用
                            </p>
                          <p>部门审核意见：月考用物品，望总务支持，谢谢</p>
                          <p>
                            总务审核状态:
                            <Radio.Group onChange={this.onChange} value={value}>
                              <Radio style={radioStyle} value={1}>
                                通过
                              </Radio>
                              <Radio style={radioStyle} value={2}>
                                不通过
                            </Radio>
                            </Radio.Group>
                          </p>
                          <p>
                            部门审核意见：
                            <TextArea rows={4}
                              size="small" />
                          </p>
                          </TabPane>
                        {/* 陈锐 */}
                        <TabPane tab="陈锐" key="3">
                        <p>
                            申领单号：SL20190523001       申领日期：2019-05-23       申领人：陈锐      申领部门：教务处       部门审核人：姚珂       领用类型：个人领用
                            </p>
                          {/* 表格 */}
                          <table className="ta" width="860px" height="160px" border="1px solid #000">
                            <tr>
                              <td>序号</td>
                              <td>物品名称</td>
                              <td>物品编码</td>
                              <td>物品分类</td>
                              <td>品牌</td>
                              <td>规格/型号</td>
                              <td>单位</td>
                              <td>数量</td>
                            </tr>
                            <tr>
                              <td>1</td>
                              <td>5号电池</td>
                              <td>xm5hdc</td>
                              <td>办公用品</td>
                              <td>南孚</td>
                              <td></td>
                              <td>节</td>
                              <td>2</td>
                            </tr>
                           
                            <tr>
                              <td>合计</td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td>2</td>
                            </tr>
                          </table>
                          <p>
                            申领原因：活动用
                            </p>
                          <p>部门审核意见：</p>
                          <p>
                            总务审核状态:
                            <Radio.Group onChange={this.onChange} value={value}>
                              <Radio style={radioStyle} value={1}>
                                通过
                              </Radio>
                              <Radio style={radioStyle} value={2}>
                                不通过
                            </Radio>
                            </Radio.Group>
                          </p>
                          <p>
                            部门审核意见：
                            <TextArea rows={4}
                              size="small" />
                          </p>
                          </TabPane>
                      </Tabs>
                    </Modal>
                  </div>
                  {/* 时间 */}
                  <Space direction="vertical" size={12} className='tim'>
                    <RangePicker
                      size="middle"
                      locale={locale}
                      dateRender={current => {
                        const style = {};
                        // if (current.date() === 1) {
                        //   style.border = '1px solid #1890ff';
                        //   style.borderRadius = '50%';
                        // }
                        return (
                          <div className="ant-picker-cell-inner" style={style} >
                            {current.date()}
                          </div>
                        );
                      }}
                    />
                  </Space>
                  {/* 下拉菜单1 */}
                  <div className="menu1">
                    <Select
                    defaultValue="全部申领部门"
                      showSearch
                      style={{ width: 130 }}
                      placeholder="全部申领部门"
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      <Option value="全部申领部门">全部申领部门</Option>
                      <Option value="教务处">教务处</Option>
                      <Option value="办公室">办公室</Option>
                      <Option value="信息中心">信息中心</Option>
                      <Option value="总务处">总务处</Option>
                    </Select>
                    {/* <Dropdown overlay={menu1}>
                      <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        全部申领部门 <DownOutlined />
                      </a>
                    </Dropdown> */}
                  </div>
                  {/* 下拉菜单2 */}
                  <div className="menu1">
                    <Select
                      showSearch
                      defaultValue="全部领用类型"
                      style={{ width: 130 }}
                      placeholder="全部领用类型"
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      <Option value="全部领用类型">全部领用类型</Option>
                      <Option value="个人领用">个人领用</Option>
                      <Option value="部门领用">部门领用</Option>
                      <Option value="活动领用">活动领用</Option>
                    </Select>
                  </div>
                  {/* 下拉菜单3 */}
                  <div className="menu1">
                    <Select
                      showSearch
                      defaultValue="全部审核状态"
                      style={{ width: 130 }}
                      placeholder="全部审核状态"
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      <Option value="全部审核状态">全部审核状态</Option>
                      <Option value="未审核">未审核</Option>
                      <Option value="审核未通过">审核未通过</Option>
                      <Option value="审核通过">审核通过</Option>
                    </Select>
                  </div>
                  {/* 输入框 */}
                  <div>
                    <Input placeholder="申领单号" />
                  </div>
                  {/* 查询 */}
                  <div>
                    <Button type="primary">查询</Button>
                  </div>
                  {/* 表格 */}
                  {/* <Table columns={columns} dataSource={data} pagination={false} className="ci" /> */}
                  <div className="tab">
                    {/* <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
                      Add a row
                    </Button> */}
                    <Table
                      components={components}
                      rowClassName={() => 'editable-row'}
                      bordered
                      dataSource={dataSource}
                      columns={columns}
                      pagination={false}
                    />
                  </div>
                  {/* 分页器 */}
                  <div>
                    <Pagination
                      className="sorter"
                      locale={locale}
                      total={85}
                      showSizeChanger
                      showQuickJumper
                      showTotal={total => `Total ${total} items`}
                    //  onChange={onChange} total={50} 
                    />
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </div>
        </>
      </Container>
    );
  }
}

export default index;
